<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @tap="goBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">评价管理</view>
			<view class="right-icons">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>


		<!-- 评价列表 -->
		<view class="content-box">


			<view class="rating-list">
				<view class="rating-item white-box" v-for="(item, index) in ratingList" :key="index">
					<view class="rating-header">
						<text class="customer-name">{{ item.customerName }}</text>
						<view class="detail-btn" @tap="viewDetail(item)">查看详情</view>
					</view>

					<view class="rating-content">
						<view class="order-number">
							订单编号：{{ item.orderNo }}
						</view>

						<view class="rating-score">
							<text>综合评分：{{ item.score }}分</text>
							<view class="stars">
								<uni-icons v-for="n in 5" :key="n" :type="n <= item.score ? 'star-filled' : 'star'"
									size="18" :color="n <= item.score ? '#FFB800' : '#ddd'"></uni-icons>
							</view>
						</view>

						<view class="rating-time">
							评价时间：{{ item.ratingTime }}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ratingList: [{
						customerName: '张女士',
						orderNo: '202101083121313',
						score: 3,
						ratingTime: '2023-03-12 11:02'
					},
					{
						customerName: '张女士',
						orderNo: '202101083121313',
						score: 3,
						ratingTime: '2023-03-12 11:02'
					}
				]
			}
		},
		methods: {
			viewDetail(item) {
				// 查看详情逻辑
				uni.navigateTo({
					url: "/pages/lz-PingJiaGuanLi/pingjiadetail/pingjiadetail",
					data: item
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: var(--status-bar-height) 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			color: #fff;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.rating-header {
		display: flex;
		justify-content: space-between;
		border-bottom: 3rpx solid gainsboro;
		padding-bottom: 5rpx;
	}

	.detail-btn {
		width: 200rpx;
	}
</style>